<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UEditor 文档导入功能</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        neutral: '#F2F3F5',
                        'neutral-dark': '#4E5969',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .shadow-soft {
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
            }
            .transition-all-300 {
                transition: all 0.3s ease;
            }
        }
    </style>
    
    <!-- UEditor资源 -->
    <script type="text/javascript" charset="utf-8" src="https://cdn.jsdelivr.net/npm/ueditor@1.4.3.3/dist/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdn.jsdelivr.net/npm/ueditor@1.4.3.3/dist/ueditor.all.min.js"></script>
    <link rel="stylesheet" type="text/tailwindcss" href="https://cdn.jsdelivr.net/npm/ueditor@1.4.3.3/dist/themes/default/css/ueditor.min.css">
</head>
<body class="font-inter bg-gray-50 min-h-screen">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 页面标题 -->
        <div class="text-center mb-10">
            <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-2">文档导入与编辑</h1>
            <p class="text-gray-500 max-w-2xl mx-auto">使用 UEditor 强大的文档处理能力，轻松导入并编辑您的文档</p>
        </div>
        
        <!-- 主要内容区域 -->
        <div class="bg-white rounded-xl shadow-soft p-6 md:p-8 mb-8">
            <!-- 文件上传区域 -->
            <div class="mb-8">
                <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                    <i class="fa fa-upload text-primary mr-2"></i> 文档上传
                </h2>
                
                <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center transition-all-300 hover:border-primary hover:bg-blue-50">
                    <input type="file" id="fileUpload" class="hidden" accept=".doc,.docx,.xls,.xlsx,.pdf,.txt,.rtf">
                    
                    <div class="cursor-pointer" onclick="document.getElementById('fileUpload').click()">
                        <i class="fa fa-cloud-upload text-5xl text-gray-400 mb-4 transition-all-300 hover:text-primary"></i>
                        <p class="text-gray-500 mb-2">点击或拖拽文件到此处上传</p>
                        <p class="text-sm text-gray-400">支持格式：Word、Excel、PDF、文本等</p>
                    </div>
                    
                    <div id="fileInfo" class="mt-4 hidden">
                        <div class="flex items-center justify-between bg-gray-50 p-3 rounded-md">
                            <div class="flex items-center">
                                <i class="fa fa-file-text-o text-primary mr-2"></i>
                                <span id="fileName" class="text-gray-700 truncate max-w-[200px]"></span>
                            </div>
                            <div class="flex items-center">
                                <span id="fileSize" class="text-xs text-gray-500 mr-3"></span>
                                <button id="removeFile" class="text-gray-400 hover:text-red-500 transition-all-300">
                                    <i class="fa fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 导入按钮 -->
            <div class="mb-8 text-center">
                <button id="importBtn" class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-lg transition-all-300 shadow-lg hover:shadow-primary/20 flex items-center justify-center mx-auto disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none">
                    <i class="fa fa-file-text-o mr-2"></i> 导入文档到编辑器
                </button>
            </div>
            
            <!-- UEditor编辑器 -->
            <div>
                <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                    <i class="fa fa-edit text-primary mr-2"></i> 编辑器
                </h2>
                <script id="editor" type="text/plain" style="width:100%;height:500px;"></script>
            </div>
        </div>
        
        <!-- 页脚 -->
        <footer class="text-center text-gray-500 text-sm py-4">
            <p>© 2025 文档导入系统 | 使用 UEditor 强大的文档处理能力</p>
        </footer>
    </div>

    <script>
        // 初始化UEditor
        var ue = UE.getEditor('editor', {
            initialFrameHeight: 500,
            autoHeightEnabled: false,
            toolbars: [
                [
                    'source', 'undo', 'redo', '|',
                    'bold', 'italic', 'underline', 'strikethrough', '|',
                    'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', '|',
                    'blockquote', 'pasteplain', '|',
                    'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                    'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                    'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                    'directionalityltr', 'directionalityrtl', 'indent', '|',
                    'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
                    'link', 'unlink', 'anchor', '|',
                    'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                    'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'pagebreak', 'template', 'background', '|',
                    'horizontal', 'date', 'time', 'spechars', '|',
                    'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                    'print', 'preview', 'searchreplace', 'drafts', 'help'
                ]
            ]
        });
        
        // 文件上传处理
        const fileUpload = document.getElementById('fileUpload');
        const fileInfo = document.getElementById('fileInfo');
        const fileName = document.getElementById('fileName');
        const fileSize = document.getElementById('fileSize');
        const removeFile = document.getElementById('removeFile');
        const importBtn = document.getElementById('importBtn');
        
        let selectedFile = null;
        
        // 文件选择事件
        fileUpload.addEventListener('change', function(e) {
            if (this.files && this.files[0]) {
                selectedFile = this.files[0];
                displayFileInfo(selectedFile);
                importBtn.disabled = false;
            }
        });
        
        // 显示文件信息
        function displayFileInfo(file) {
            fileName.textContent = file.name;
            fileSize.textContent = formatFileSize(file.size);
            fileInfo.classList.remove('hidden');
        }
        
        // 移除文件
        removeFile.addEventListener('click', function() {
            fileUpload.value = '';
            selectedFile = null;
            fileInfo.classList.add('hidden');
            importBtn.disabled = true;
        });
        
        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
        
        // 导入文档到编辑器
        importBtn.addEventListener('click', function() {
            if (!selectedFile) {
                alert('请先选择一个文件');
                return;
            }
            
            // 显示加载状态
            importBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 正在导入...';
            importBtn.disabled = true;
            
            // 模拟导入过程
            setTimeout(function() {
                // 根据文件类型处理
                const fileExtension = selectedFile.name.split('.').pop().toLowerCase();
                
                let content = '';
                
                // 模拟不同文件类型的导入内容
                switch(fileExtension) {
                    case 'doc':
                    case 'docx':
                        content = `
                            <h2>${selectedFile.name}</h2>
                            <p>这是一个Word文档示例，已成功导入到UEditor编辑器中。</p>
                            <p>您可以继续编辑此文档，使用编辑器提供的丰富功能。</p>
                            <h3>文档导入说明</h3>
                            <ul>
                                <li>支持各种格式的Word文档导入</li>
                                <li>保留文档的基本格式和样式</li>
                                <li>可以直接在编辑器中进行修改和保存</li>
                            </ul>
                        `;
                        break;
                        
                    case 'xls':
                    case 'xlsx':
                        content = `
                            <h2>${selectedFile.name}</h2>
                            <p>这是一个Excel表格示例，已成功导入到UEditor编辑器中。</p>
                            <p>您可以使用编辑器的表格功能继续编辑此表格。</p>
                            <table border="1" cellspacing="0" cellpadding="5" style="border-collapse:collapse;">
                                <tr>
                                    <th>姓名</th>
                                    <th>年龄</th>
                                    <th>职业</th>
                                </tr>
                                <tr>
                                    <td>张三</td>
                                    <td>30</td>
                                    <td>工程师</td>
                                </tr>
                                <tr>
                                    <td>李四</td>
                                    <td>25</td>
                                    <td>设计师</td>
                                </tr>
                                <tr>
                                    <td>王五</td>
                                    <td>35</td>
                                    <td>产品经理</td>
                                </tr>
                            </table>
                        `;
                        break;
                        
                    case 'pdf':
                        content = `
                            <h2>${selectedFile.name}</h2>
                            <p>这是一个PDF文档示例，已成功导入到UEditor编辑器中。</p>
                            <p>由于PDF格式的特殊性，某些复杂格式可能无法完全保留。</p>
                            <p>您可以继续编辑此文档的文本内容。</p>
                            <blockquote>
                                <p>PDF文档通常用于展示固定格式的内容，导入后可以转换为可编辑的文本格式。</p>
                            </blockquote>
                        `;
                        break;
                        
                    case 'txt':
                    case 'rtf':
                        content = `
                            <h2>${selectedFile.name}</h2>
                            <p>这是一个文本文件示例，已成功导入到UEditor编辑器中。</p>
                            <p>文本内容可以直接在编辑器中进行修改和格式化。</p>
                            <pre>
这是示例文本内容...
这是一个纯文本文件，可能包含各种信息。
导入到UEditor后，您可以使用丰富的编辑功能对其进行格式化和处理。
                            </pre>
                        `;
                        break;
                        
                    default:
                        content = `
                            <h2>${selectedFile.name}</h2>
                            <p>这是一个${fileExtension.toUpperCase()}文件，已成功导入到UEditor编辑器中。</p>
                            <p>您可以继续编辑此文档。</p>
                        `;
                }
                
                // 设置编辑器内容
                ue.ready(function() {
                    ue.setContent(content);
                });
                
                // 恢复按钮状态
                importBtn.innerHTML = '<i class="fa fa-check mr-2"></i> 导入成功';
                setTimeout(function() {
                    importBtn.innerHTML = '<i class="fa fa-file-text-o mr-2"></i> 导入文档到编辑器';
                    importBtn.disabled = false;
                }, 2000);
                
                // 滚动到编辑器
                document.querySelector('#editor').scrollIntoView({ behavior: 'smooth' });
                
            }, 1500); // 模拟1.5秒的导入时间
        });
        
        // 页面加载完成后的动画效果
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化时禁用导入按钮
            importBtn.disabled = true;
            
            // 添加淡入动画
            document.body.classList.add('opacity-0');
            setTimeout(function() {
                document.body.classList.add('transition-all-300');
                document.body.classList.remove('opacity-0');
            }, 100);
        });
    </script>
</body>
</html>
    